import { useState, memo } from 'react'
import { useCallback } from 'react'
interface fnItem{
    fn:()=>void
}
export default function App() {
    const [count, setCount] = useState(123)
    const handleClick = () => {
        setCount(count + 1)
    }
    // const fn = () => {
    //     console.log('*****');    
    // }
    const fn = useCallback(() => {
    console.log('*****');    
    }, [])
    return (
        <>
            <h1>MemoComponents</h1>
            <button onClick={handleClick}>button</button>
            {count}
            <Children fn={fn}></Children>
        </>
    )
}

const Children = memo(
    function Children({fn}:fnItem) {
    return (
        <>
            <h1>Children</h1>
            {Math.random()}
            {fn()}
        </>
    )
})